<template>
  <div class="timePickerDialog dialog flex-column">
    <div class="dialogHead flex-row">
      <div class="editServiceTitle">定时发布</div>
      <i class="layui-icon layui-icon-close pointer" @click="closeDialog"></i>
    </div>
    <input class="layui-input" type="text" id="datePicker" placeholder="选择时间">
    <button class="layui-btn layui-btn-normal submitInfo" @click="setTimeDone">确定</button>
  </div>
</template>
<script>
export default {
  name: 'timePicker',
  data() {
    return {
      datetime: null,
    }
  },
  mounted() {
    const that = this
    layui.use('laydate', function(){
      const laydate = layui.laydate
      laydate.render({
        elem: '#datePicker',
        trigger: 'click',
        type: 'datetime',
        lang: 'cn',
        min: 0,
        done(val) {
          that.datetime = val
        }
      })
    })
  },
  methods: {
    setTimeDone() {
      if(!this.datetime){
        return this.$message({
          type: 'error',
          message: '请选择时间'
        });
      }
      const date = new Date(this.datetime).getTime();
      this.$emit('submit', date)
    },
    closeDialog() {
      this.$emit('closeTimePicker')
    }
  }
}
</script>
<style lang="scss" scoped>
.timePickerDialog {
  input {
    width: 88%;
    margin: 8px 24px 0 24px;
  }
  .submitInfo {

  }
}
</style>
